<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
	<link rel="stylesheet" type="text/css" href="themes/themes.css" />
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>	
	<script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
	<script type="text/javascript" src="js/cordova-2.6.0.js" charset="utf-8" ></script>
	
	<script type="text/javascript" charset="utf-8">
		
		function iniciar() {			
			document.addEventListener("deviceready", dispositivoListo, false);			
		}
		function dispositivoListo() {
						
		}
		function tomarFoto(){
			navigator.camera.getPicture(onCamaraSuccess, onCamaraError);
		}
		function onCamaraSuccess(imageURL){
			navigator.notification.alert( "OK: " + imageURL);
			var ic = document.getElementById("imagenContenedor");
			ic.innerHTML = '<img src="'+imageURL+'" width="50%"/>';
		}
		function onCamaraError( e ){
			navigator.notification.alert( "Error: " + e );
		} 
		
		
	    function EnviarColabora(){
	    	
	    	
	    	
	    	//verificar radio button
	    	var total,valor;
	    	total=document.getElementsByName('radio-choice-1').length;
	    	 
	    	for (var i=0;i<total;i++){
	    	valor=document.getElementsByName('radio-choice-1').item(i).checked;
	    	 
	    	if (valor){
	    		nom=document.getElementsByName('radio-choice-1').item(i).value;
	    		//alert(nom);
	    	}	    		    	
	    	}//end For
	    	
	    	var asunto = $("#asunto").val();
	    	var descripcion = $("#descripcion").val();
	    	var usuarioDni = $("#usuarioDni").val();
	    	var fecha = $("#fecha").val();
	    	
	    	console.log("aquiiiii pámela");
	    	
	    	$.post("http://192.168.1.39/appMunicipalidad/MunicipalidadREST/colabora_REST.php",
	    			{asunto: asunto, tipo: nom, descripcion: descripcion, usuarioDni: usuarioDni, fecha: fecha}, function(data){
	    		
	    		console.log("aqui pámela 2");
	    		
	    		if ( data.status=="OK") {
	    			alert("Correcto");
	    			window.location.assign("colabora.html");
	    		} else {
	    			alert("Incorrecto");
	    		}
	    		
	    	}, "json");
	    	
	    }
		
		
		
		
		
	</script>
</head>

<body onload="iniciar()">

	<div data-role="page">
		<div data-role="header" data-position="fixed">		
			<h1>Colabora</h1>
		</div>
		
		<div data-role="content" style="text-align:center">			
			<button onclick="tomarFoto()" value="Tomar Foto" ></button>	
			<div id="imagenContenedor"></div><br/>
	
					<label for="lstCriterio" data-theme="a">Seleccionar Asunto</label>
					<select name="lstCriterio" id="asunto" data-mini="true" style="width: 95%" >
				        <option value="">...</option>
				        <option value="reportar">Reportar</option>
				        <option value="trafico">Trafico</option>
				        <option value="accidente">Accidente</option>
				        <option value="obras">Obras</option>
				        <option value="inundacion">Inundacion</option>
				        <option value="manifestaciones">Manifestaciones</option>				        
				    </select>			
				    
			    
		<div data-role="fieldcontain" >
		<label>Tipo</label>	
		    <fieldset data-role="controlgroup">
		         	<input type="radio" style="width: 95%"  name="radio-choice-1" id="tipo1" value="informativo" checked="checked" />
		         	<label for="tipo1">Informativo</label>
		
		         	<input type="radio" style="width: 95%"  name="radio-choice-1" id="tipo2" value="preventivo"  />
		         	<label for="tipo2">Preventivo</label>
		
		         	<input type="radio" style="width: 95%"  name="radio-choice-1" id="tipo3" value="urgencia"  />
		         	<label for="tipo3">Urgencia</label>
		    </fieldset></div>
		
		
		
		<br/>
			<label>Descripción</label>
			
			<textarea name="textarea" id="descripcion" cols="3" rows="3"></textarea>		
		
		<div>
			<br/><label>Usuario-DNI </label>	
			<input type="text" style="width: 80%"  id="usuarioDni" data-theme="a" />						
		</div><br/>
		
		<div><label>Fecha</label>
			<input type="date" style="width: 80%"  id="fecha" data-theme="a"/>						
		</div><br/>
		
		<div>
			<button type="date"  style="width: 50%" name="button" value="Enviar" data-theme="a" onClick="EnviarColabora()"></button> 					
		</div><br/>
				    
				    
				        
		</div>
			
	
		
		<div data-role="footer" data-theme="b" data-position="fixed">
			<div data-role="navbar">
				<ul>

					<li><a href="menu.html" data-transición = "flujo"  rel="external" href="d" data-icon="start">Menú</a></li>

				</ul>
				
			</div>
		</div>
	</div>
	
</body>

</html>